<template>
  <!-- 消息模块 -->
  <view class="deviceManage">
    <view class="btns">
      <button
        class="submit-btn"
        type="primary"
        :data-url="'/deviceManagement/addingDevice/addingDevice?flag=1'"
        @click="handleClickRouter"
        icon="map"
        style="width: 100%"
      >
        + 添加设备组
      </button>
    </view>
    <view class="wrapper-content">
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        @scroll="scrollHeight"
        :style="[
          {
            height: '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
          <view
            :data-url="`/deviceManagement/deviceManInfo/deviceManInfo?data=${encodeURIComponent(
              JSON.stringify(v)
            )}`"
            @click="handleClickRouter"
          >
            <view class="monitor">
              <view class="line-hidden name">监测仪MN码:{{ v.monitorMn }}</view>
              <!-- 1在线   2离线  3预警  4告警  -->
              <view
                class="four-state online"
                :class="
                  v.status == 1
                    ? 'online'
                    : v.status == 2
                    ? 'offLine'
                    : v.status == 3
                    ? 'ealyWran'
                    : 'giveAlarm'
                "
              >
                {{
                  v.status == 1
                    ? "在线"
                    : v.status == 2
                    ? "离线"
                    : v.status == 3
                    ? "预警"
                    : "告警"
                }}
              </view>
            </view>
            <view class="headline">
              {{ v.restaurantId_dictText }}-{{ v.name }}
            </view>
            <view class="item-content">
              <view class="item-cycle">
                <view class="cycleName">餐厅清洗周期</view>
                <view class="cycleTime">{{ v.restaurant.cleanCycle }}天</view>
              </view>
              <view class="item-cycle">
                <view class="cycleName">最近一次清洗时间</view>
                <view class="cycleTime">
                  {{ formatters(v.restaurant.cleanTime, "YY/MM/DD") }}
                </view>
              </view>
              <view class="item-cycle">
                <view class="cycleName">清洗倒计时</view>
                <view class="cycleTime">
                  {{ daySub(v.restaurant.expireDay) }}
                </view>
              </view>
            </view>
          </view>

          <view class="item-infos">
            <view
              class="devicename"
              :data-url="`/deviceManagement/addCleansing/addCleansing?data=${encodeURIComponent(
                JSON.stringify(v)
              )}`"
              @click="handleClickRouter"
            >
              <image
                :src="
                  baseImgUrl +
                  (v.purifyInfoStatus == 1 ? 'righticon.png' : 'addIcon.png')
                "
                mode="aspectFill"
              ></image>
              净化器信息
            </view>
            <view
              class="devicename"
              :data-url="`/deviceManagement/addCleansing/addwmInfo?data=${encodeURIComponent(
                JSON.stringify(v)
              )}`"
              @click="handleClickRouter"
            >
              <image
                :src="
                  baseImgUrl +
                  (v.fanInfoStatus == 1 ? 'righticon.png' : 'addIcon.png')
                "
                mode="aspectFill"
              ></image>
              排风机信息
            </view>
            <view
              class="devicename"
              :data-url="`/deviceManagement/addCleansing/flueInfo?data=${encodeURIComponent(
                JSON.stringify(v)
              )}`"
              @click="handleClickRouter"
            >
              <image
                :src="
                  baseImgUrl +
                  (v.smokeInfoStatus == 1 ? 'righticon.png' : 'addIcon.png')
                "
                mode=""
              ></image>
              烟道信息
            </view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="暂无内容！"
          :icon="baseImgUrl + 'no-icon2.png'"
        >
        </u-empty>
      </view>
    </view>

    <custom-tab-bar :tabBarIndex="tabBarIndex" ref="tabRef" />
  </view>
</template>

<script>
import { devicePage } from "@/api/deviceManage.js";
import mixin from "@/utils/mixin.js";
import { handleClickRouter, whetherLogin, formatters } from "@/utils/util.js";

export default {
  mixins: [mixin],
  data() {
    return {
      token: "",
      baseImgUrl: this.$baseImgUrl,
      tabBarIndex: 1,
      scrollTop: 0,
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.scrollTop = 0;
    uni.removeStorageSync("scrollTop");
  },
  onShow() {
    this.token = wx.getStorageSync("X-MINI-TOKEN");
    if (!this.token) {
      whetherLogin();
      return;
    }
    this.scrollTop = uni.getStorageSync("scrollTop") || 0;

    // uni.$on("deviceManageData", (data) => {
    this.pageConfig.pageNo = 1;
    this.dataSource = [];
    this.getList();
    // });
  },
  methods: {
    handleClickRouter,
    formatters,
    scrollHeight(e) {
      uni.setStorageSync("scrollTop", e.detail.scrollTop);
    },
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    daySub(v) {
      if (v < 0) {
        let vto = v.toString();
        return `逾期${vto.substring(1)}天`;
      }
      return v + "天";
    },
    getList() {
      let data = {
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };
      devicePage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss">
.deviceManage {
  height: 100%;
  background: #f8f9fb;

  .wrapper-content {
    margin: 15rpx 15rpx 0;
    height: calc(100% - 254rpx);
    background: #f8f9fb;
    .wrapper-item {
      padding: 20rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
    }
  }

  .monitor {
    display: flex;
    align-items: center;
    .name {
      margin-right: 10rpx;
      font-size: 28rpx;
      color: #a1a1a1;
      max-width: 570rpx;
    }

    .four-state {
      padding: 2rpx 14rpx;
      border-radius: 24rpx;
    }

    // 在线
    .online {
      color: #0ac25a;
      background: #dffff2;
      border: 1px solid #b0efd5;
    }

    // 告警
    .giveAlarm {
      color: #ff2626;
      background: #ffe3e1;
      border: 1px solid #fcc9c6;
    }

    // 预警
    .ealyWran {
      color: #f39835;
      background: #fef4e9;
      border: 1px solid #ffd3a4;
    }

    // 离线
    .offLine {
      color: #9c9c9c;
      background: #f5f5f5;
      border: 1px solid #e3e3e3;
    }
  }

  .headline {
    margin-top: 10rpx;
    color: #030303;
    font-size: 30rpx;
    font-weight: bold;
  }

  .item-content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    font-size: 24rpx;

    .item-cycle {
      position: relative;
      text-align: center;
      width: 33%;

      .cycleName {
        color: #a1a1a1;
      }

      .cycleTime {
        margin: 10rpx 0 20rpx;
        color: #333333;
      }
    }
  }

  .item-infos {
    display: flex;
    justify-content: space-around;
    .devicename {
      margin: 0 8rpx;
      padding: 10rpx 15rpx;
      width: 200rpx;
      border: 1px solid #e8e8e8;
      border-radius: 32rpx;
      color: #666666;
      font-size: 26rpx;
      image {
        margin-right: 8rpx;
        vertical-align: text-bottom;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .submit-btn {
    color: #00c9ae !important;
    background: #e1fffb !important;
  }
}
</style>
